<template>
    <div @click="toWork">
        <div class="teacher-message">
            <div class="teacher-message-content">
                <div class="main-message">有网友回复了你的评论</div>
                <div class="detail-message">
                    <span>{{ props.replyData.content }}</span>
                </div>
            </div>
            <div class="teacher-message-time-icon">
                <div class="message-time">{{ props.replyData.publishTime }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 接收父组件传过来的数据
const props = defineProps({
    replyData: {
        type: Array,
        required: true
    },
});
</script>

<style scoped lang="scss">
.teacher-message {
    width: 670px;
    height: 100px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 0 35px 30px 35px;
    display: flex;
    // border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);

    .teacher-message-content {
        width: 535px;
        // background-color: lightcoral;
        padding: 20px 0 20px 15px;

        .main-message {
            font-weight: 600;
        }

        .detail-message {
            font-size: 14px;
            margin-top: 10px;
        }
    }

    .teacher-message-time-icon {
        width: 85px;
        // background-color: lightgoldenrodyellow;
        margin: 25px auto;
        position: relative;

        .message-time {
            font-size: 12px;
            // text-align: center;
        }
    }
}
</style>